// ----------------------------- 1. 列表加载

get();
function get() {
    $.ajax({
        url: '/my/article/cates',
        success: function (res) {
            // console.log(res);
            if (res.status == 0) {
                let str = '';
                res.data.forEach(function (item, index) {
                    str += `
                    <tr>
                        <td>${item.name}</td>
                        <td>${item.alias}</td>
                        <td>
                        <button type="button" class="layui-btn layui-btn-xs btnEdit" data-id="${item.Id}" data-name="${item.name}" data-alias="${item.alias}">编辑</button>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btnDelete" data-id="${item.Id}">删除</button>
                        </td>
                    </tr>
                    `;
                });
                // 把组合后的HTML标签，放到指定的位置
                $('tbody').html(str);
            }
        }
    });
}




// ----------------------------------- 2. 删除功能
let layer = layui.layer;

// 动态url地址/动态路由  /my/article/deletecate/:id      
$('tbody').on('click', '.btnDelete', function () {
    // 解决this 指向 问题
    // --------------------方法1： 不推荐，形成闭包
    let that = this;  // 不推荐，形成闭包   占内存 
    layer.confirm('你确认要删除吗?', (index) => {

        // 获取对应的id
        let id = $(this).attr('data-id');
        // 发送请求
        $.ajax({
            url: '/my/article/deletecate/' + id,
            success: function (res) {
                layer.msg(res.message);
                if (res.status == 0) {
                    // 列表重新加载
                    get();
                }
            }
        });
    });


    // -------------- 方法2：不推荐 在外面获取 id值  形成闭包 占内存
    // 获取对应的id
    let id = $(this).attr('data-id');
    layer.confirm('你确认要删除吗?', function (index) {
        // 发送请求
        $.ajax({
            url: '/my/article/deletecate/' + id,
            success: function (res) {
                layer.msg(res.message);
                if (res.status == 0) {
                    // 列表重新加载
                    get();
                }
            }
        });
    });


    // ------------------ 方法3： call apply bind 
    // layer.confirm('你确认要删除吗?', function (index) {

    //     // 获取对应的id
    //     let id = $(this).attr('data-id');

    //     // 发送请求
    //     $.ajax({
    //         url: '/my/article/deletecate/' + id,
    //         success: function (res) {
    //             layer.msg(res.message);
    //             if (res.status == 0) {
    //                 // 列表重新加载
    //                 get();
    //             }
    //         }
    //     });
    // }, bind(this));




    // --------------------- 方法4：箭头函数
    layer.confirm('是否要删除', { icon: 3, title: '提示' }, (index) => {
        // 获取对应的id
        let id = $(this).attr('data-id');
        // 发送请求
        $.ajax({
            url: '/my/article/deletecate/' + id,
            success: function (res) {
                layer.msg(res.message);
                if (res.status == 0) {
                    // 列表重新加载
                    get();
                }
            }
        });
        layer.close(index);
    });


});


// ---------------------------- 3. 添加类别

let addStr = `
    <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
        <div class="layui-form-item">
        <label class="layui-form-label">类别名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">类别别名</label>
        <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    `;

// console.log($('.add-form'));

$('.add').click(function () {
    let index = layer.open({
        type: 1,  // 页面层，弹窗内部设置一些页面结构 HTML结构！
        title: '添加类别',  // 左上角显示标题 
        area: ['500px', '250px'], // area区域：弹窗宽和高！
        content: addStr  // content:内容？弹窗的内容！HTML结构字符串！

    });
    // 这个注册的事件在dom元素创建后注册的, 有一个先后关系, 所以不需要事件委托也可以注册事件
    // console.log($('.add-form'));  // 能获取到动态创建的form表单
    // 注册提交事件
    $('.add-form').on('submit', function (e) {
        e.preventDefault();
        // 收集和提交数据
        $.ajax({
            url: '/my/article/addcates',
            type: 'post',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status == 0) {
                    get();
                    layer.close(index);
                }
            }
        })
    });
});


// -------------------------------- 4.  编辑功能

let form = layui.form;

let edit_str = `
    <form class="layui-form edit-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="abc">
        <div class="layui-form-item">
        <label class="layui-form-label">类别名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
        </div>
        <div class="layui-form-item">
        <label class="layui-form-label">类别别名</label>
        <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
        </div>
        <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="Id">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
        </div>
        </div>
    </form>
`;

$('tbody').on('click', '.btnEdit', function () {
    // (1) 把点击该项对应的数据获取到 (通过发送请求也可以获取)，这样写减少请求
    // 回到页面内列表生成的代码， name 别名、id设置自定义属性绑定在每个编辑按钮上
    // 自定义属性可以设置多次
    let Id = $(this).attr('data-id');
    let name = $(this).attr('data-name');
    let alias = $(this).attr('data-alias');
    // (1) 准备一个弹窗
    let index = layer.open({
        type: 1,
        content: edit_str,
        area: ['500px', '250px'],
        title: '编辑类别'
    });
    // (2) 对弹窗 from 赋值
    form.val('abc', {
        name: name,
        alias: alias,
        Id: Id
    });
    // (3) 注册提交事件
    $('.edit-form').on('submit', function (e) {
        e.preventDefault();
        // 收集和提交数据
        $.ajax({
            url: '/my/article/updatecate',
            type: 'post',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status == 0) {
                    get();
                    layer.close(index);
                }
            }
        })
    });
});








